<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button v-auth="'system:loginLog:clear'" type="primary" icon="el-icon-brush" @click="clear">清空</el-button>
                <el-button v-auth="'system:loginLog:remove'" type="danger" plain icon="el-icon-delete" :disabled="selection.length===0" @click="batchDel">删除</el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
					<el-input v-model="search.username" placeholder="请输入用户名" clearable></el-input>
                    <el-button v-auth="'system:loginLog:page'" type="primary" icon="el-icon-search" @click="upSearch">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="dataList" row-key="id" @selection-change="selectionChange"  stripe remoteSort remoteFilter>
                <el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="ID" prop="id" align="center" width="120"></el-table-column>
				<el-table-column label="状态" prop="successFlag" align="center" width="150">
					<template #default="scope">
						<el-tag v-if="scope.row.successFlag" type="success">成功</el-tag>
						<el-tag v-if="!scope.row.successFlag" type="danger">失败</el-tag>
					</template>
				</el-table-column>
                <el-table-column label="用户名" prop="username" align="center" width="150"></el-table-column>
                <el-table-column label="请求ip" prop="requestIp" align="center" width="180"></el-table-column>
                <el-table-column label="请求地点" prop="requestLocation" align="center" width="180"></el-table-column>
                <el-table-column label="登录时间" prop="loginTime" align="center" min-width="180"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="180">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="tableShow(scope.row, scope.$index)">
                                查看
                            </el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="tableDel(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button v-auth="'system:loginLog:remove'" text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>

            </scTable>
        </el-main>
    </el-container>

	<info-dialog v-if="dialog.info" ref="infoDialog" @closed="dialog.info=false"></info-dialog>

</template>

<script>
	import infoDialog from "./info.vue";

    export default {
        name: 'loginLog',
        components: {
			infoDialog
        },
        data() {
            return {
                dialog: {
                    info: false
                },
                selection: [],
                search: {
					username: null
                },
                dataList: this.$API.system.loginLog.page
            }
        },
        methods: {
            // 批量删除
            batchDel() {
                this.$confirm(`确定删除选中的` + this.selection.length + `项数据吗？`, '提示', {
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading();
                    const idList = [];
                    this.selection.forEach(e => idList.push(e.id));
                    const reqData = {idList: idList};
                    this.$API.system.loginLog.remove.delete(reqData).then(() => {
                        this.$refs.table.refresh();
                        this.$message.success("删除成功");
                    })
                    loading.close();
                })
            },
			// 清空
			clear() {
					this.$confirm(`确定清空所有数据吗？`, '提示', {
							type: 'warning'
					}).then(() => {
							const loading = this.$loading();
							this.$API.system.loginLog.clear.delete().then(() => {
									this.$refs.table.refresh();
									this.$message.success("清空成功");
							})
							loading.close();
					})
			},
            // 查看
            tableShow(row) {
                this.dialog.info = true;
                this.$nextTick(() => {
                    this.$refs.infoDialog.setData(row);
                })
            },
            // 删除
            tableDel(row) {
                const reqData = {idList: [row.id]};
                this.$API.system.loginLog.remove.delete(reqData).then(() => {
                    this.$refs.table.refresh();
                    this.$message.success("删除成功");
                })
            },
            // 搜索
            upSearch() {
                this.$refs.table.upData(this.search);
            },
            // 重置
            resetSearch() {
				this.search.username = null;
                this.$refs.table.upData(this.search);
            },
            // 表格选择后回调事件
            selectionChange(selection) {
                this.selection = selection;
            }
        }
    }
</script>

<style>
</style>
